<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion | YUI | All Your Base</title>

<style type="text/css">
@import url(/css/allyourbase.css);
@import url(/examples/css/ayb.css);

ul {margin:0;}
ul li {}
ul li a {color:#FFFFFF;}

.list_item {background-color:#FFCC00;}
.list_item a {display:block;padding:0 5px;height:20px;line-height:20px;text-transform:uppercase;font-weight:bold;}
.nested_item {height:0;overflow:hidden;background-color:#FF9900;}
.nested_item a {text-transform:none;font-weight:normal;}

.nojs {}
</style>

</head>

<body class="nojs center">

<div id="page">
    
    <ul id="menu" class="accordion">
		<li class="list_item"><a class="toggle" href="http://google.com">Link 1</a>
        	<ul class="nested_item">
            	<li><a href="#">Link 1a</a></li>
				<li><a href="#">Link 1b</a></li>
            </ul>
        </li>
		<li class="list_item"><a class="toggle" href="#">Link 2</a>
        	<ul class="nested_item">
            	<li><a href="#">Link 2a</a></li>
				<li><a href="#">Link 2b</a></li>
                <li><a href="#">Link 2c</a></li>
            </ul>
        </li>
		<li class="list_item"><a class="toggle" href="#">Link 3</a>
        	<ul class="nested_item">
            	<li><a href="#">Link 3a</a></li>
            </ul>
        </li>
		<li class="list_item"><a class="toggle" href="#">Link 4</a>
        	<ul class="nested_item">
            	<li><a href="#">Link 4a</a></li>
				<li><a href="#">Link 4b</a></li>
                <li><a href="#">Link 4c</a></li>
				<li><a href="#">Link 4d</a></li>
            </ul>
        </li>
	</ul>
    <hr />
    <p>Accordion Menu. Toggle set to false.</p>
    <ul id="nav" class="accordion">
		<li class="list_item"><a class="toggle" href="#">Link 1</a>
        	<ul class="nested_item">
            	<li><a href="#">Link 1a</a></li>
				<li><a href="#">Link 1b</a></li>
            </ul>
        </li>
		<li class="list_item"><a class="toggle" href="#">Link 2</a>
        	<ul class="nested_item">
            	<li><a href="#">Link 2a</a></li>
				<li><a href="#">Link 2b</a></li>
                <li><a href="#">Link 2c</a></li>
            </ul>
        </li>
		<li class="list_item"><a class="toggle" href="#">Link 3</a>
        	<ul class="nested_item">
            	<li><a href="#">Link 3a</a></li>
            </ul>
        </li>
		<li class="list_item"><a class="toggle" href="#">Link 4</a>
        	<ul class="nested_item">
            	<li><a href="#">Link 4a</a></li>
				<li><a href="#">Link 4b</a></li>
                <li><a href="#">Link 4c</a></li>
				<li><a href="#">Link 4d</a></li>
            </ul>
        </li>
	</ul>
    <hr />
    <p>Accordion Menu. Toggle set to true.</p>
	
</div>

<div id="footer">
	<a href="/">Back</a>
</div>

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="/js/ie_util.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/namespace.js"></script>
<!-- Source file -->
<script src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js" type="text/javascript"></script>

<script src="/js/yui/2.6/AllYourBase/ui/Accordion.js" type="text/javascript"></script>
<script type="text/javascript">
	YAHOO.util.Dom.removeClass(YAHOO.util.Dom.getElementsBy(function(el){return true;},'body'), 'nojs');

	new AYB.ui.Accordion({ rootNodeId: 'menu', toggle: 'false' });
	new AYB.ui.Accordion({ rootNodeId: 'nav' });
</script>

</body>
</html>
